<template>
  <div class="container">
    <div v-if="patient">
      <div class="title-box">
        <h2>实验室检查报告</h2>
        <div class="form-subgroup">
          <div class="form-label">报告日期</div>
          <el-date-picker
            v-model="selectDate"
            type="date"
            placeholder="选择日期"
            value-format="YYYY-MM-DD"
            @change="onSelectDateChange"
          />
        </div>
      </div>

      <div class="row">
        <div class="col">
          <div class="card">
            <h3 class="section-title">血尿酸趋势</h3>
            <div class="chart">
              <div ref="laboratoryRef" style="width: 100%; height: 100%;"></div>
            </div>
          </div>
        </div>

        <div class="col" style="flex: 0 0 40%; max-width: 40%;">
          <div class="card">
            <h3 class="section-title">当前血尿酸水平</h3>
            <div class="big-number">
              <div class="big-number-value">{{ lab_results.uric_acid_trend.current }}</div>
              <div class="big-number-unit">{{ lab_results.uric_acid_trend.unit }}</div>
              <div class="big-number-alert">
                <span :class="getMetricStatus(lab_results.uric_acid_trend.status)">{{
                    lab_results.uric_acid_trend.status
                  }}</span>
              </div>
            </div>
            <div class="reference-value">
              <p>正常参考范围：</p>
              <p>男性: {{ lab_results.uric_acid_trend.reference_range.male }}</p>
              <p>女性: {{ lab_results.uric_acid_trend.reference_range.female }}</p>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <div class="card metric-card">
            <div class="metric-value">{{ lab_results.creatinine.value }}<span
              style="font-size: 16px">{{ lab_results.creatinine.unit }}</span></div>
            <div class="metric-name">肌酐</div>
            <span :class="getMetricStatus(lab_results.creatinine.status)">{{
                lab_results.creatinine.status
              }}</span>
          </div>
        </div>
        <div class="col">
          <div class="card metric-card">
            <div class="metric-value">{{ lab_results.urea.value }}<span
              style="font-size: 16px">{{ lab_results.urea.unit }}</span></div>
            <div class="metric-name">尿素</div>
            <span :class="getMetricStatus(lab_results.urea.status)">{{ lab_results.urea.status }}</span>
          </div>
        </div>
        <div class="col">
          <div class="card metric-card">
            <div class="metric-value">{{ lab_results.blood_pressure.value }}<span
              style="font-size: 16px">{{ lab_results.blood_pressure.unit }}</span></div>
            <div class="metric-name">血压</div>
            <span :class="getMetricStatus(lab_results.blood_pressure.status)">{{
                lab_results.blood_pressure.status
              }}</span>
          </div>
        </div>
        <div class="col">
          <div class="card metric-card">
            <div class="metric-value">{{ lab_results.bmi.value }}<span
              style="font-size: 16px">{{ lab_results.bmi.unit }}</span></div>
            <div class="metric-name">体质指数</div>
            <span :class="getMetricStatus(lab_results.bmi.status)"
                  class="metric-status metric-warning">{{ lab_results.bmi.status }}</span>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <div class="card">
            <h3 class="section-title">尿酸指标</h3>
            <div class="metric-row">
              <div class="metric-label">血尿酸</div>
              <div class="metric-result">
                <div class="metric-result-value">{{
                    lab_results.uric_acid.blood_uric_acid.value + lab_results.uric_acid.blood_uric_acid.unit
                  }}
                </div>
                <span :class="getMetricStatus(lab_results.uric_acid.blood_uric_acid.status)">{{
                    lab_results.uric_acid.blood_uric_acid.status
                  }}</span>
              </div>
            </div>
            <div class="metric-row">
              <div class="metric-label">24h尿酸</div>
              <div class="metric-result">
                <div class="metric-result-value">{{
                    lab_results.uric_acid['24h_uric_acid'].value + lab_results.uric_acid['24h_uric_acid'].unit
                  }}
                </div>
                <span
                  :class="getMetricStatus(lab_results.uric_acid['24h_uric_acid'].status)">{{
                    lab_results.uric_acid['24h_uric_acid'].status
                  }}</span>
              </div>
            </div>
            <div class="metric-row">
              <div class="metric-label">尿酸清除率</div>
              <div class="metric-result">
                <div class="metric-result-value">{{
                    lab_results.uric_acid.uric_acid_clearance.value + lab_results.uric_acid.uric_acid_clearance.unit
                  }}
                </div>
                <span
                  :class="getMetricStatus(lab_results.uric_acid.uric_acid_clearance.status)">{{
                    lab_results.uric_acid.uric_acid_clearance.status
                  }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--24小时尿酸化物指标-->
      <div class="row">
        <div class="col">
          <div class="card">
            <h3 class="section-title">24小时尿酸化物指标</h3>
            <div class="metric-row">
              <div class="metric-label">尿酸清除率(CLUA)</div>
              <div class="metric-result">
                <div class="metric-result-value">{{ lab_results['24h_urine_test'].feua.value }}</div>
                <span :class="getMetricStatus(lab_results['24h_urine_test'].feua.status)">{{
                    lab_results['24h_urine_test'].feua.status
                  }}</span>
              </div>
            </div>
            <div class="metric-row">
              <div class="metric-label">尿酸排泄</div>
              <div class="metric-result">
                <div class="metric-result-value">{{
                    lab_results['24h_urine_test'].uric_acid_excretion.value + lab_results['24h_urine_test'].uric_acid_excretion.unit
                  }}
                </div>
                <span :class="getMetricStatus(lab_results['24h_urine_test'].uric_acid_excretion.status)">{{
                    lab_results['24h_urine_test'].uric_acid_excretion.status
                  }}</span>
              </div>
            </div>
            <div class="metric-row">
              <div class="metric-label">内源性尿酸肌酐比值</div>
              <div class="metric-result">
                <div class="metric-result-value">{{
                    lab_results['24h_urine_test'].uacr.value + lab_results['24h_urine_test'].uacr.unit
                  }}
                </div>
                <span :class="getMetricStatus(lab_results['24h_urine_test'].uacr.status)">{{
                    lab_results['24h_urine_test'].uacr.status
                  }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <div class="card">
            <h3 class="section-title">血生化及免疫学相关测定</h3>
            <div class="metric-row">
              <div class="metric-label">血糖</div>
              <div class="metric-result">
                <div class="metric-result-value">
                  {{
                    lab_results.blood_biochemistry.glucose.value + lab_results.blood_biochemistry.glucose.unit
                  }}
                </div>
                <span
                  :class="getMetricStatus(lab_results.blood_biochemistry.glucose.status)">{{
                    lab_results.blood_biochemistry.glucose.status
                  }}</span>
              </div>
            </div>
            <div class="metric-row">
              <div class="metric-label">总胆固醇</div>
              <div class="metric-result">
                <div class="metric-result-value">
                  {{
                    lab_results.blood_biochemistry.total_cholesterol.value + lab_results.blood_biochemistry.total_cholesterol.unit
                  }}
                </div>
                <span
                  :class="getMetricStatus(lab_results.blood_biochemistry.total_cholesterol.status)">{{
                    lab_results.blood_biochemistry.total_cholesterol.status
                  }}</span>
              </div>
            </div>
            <div class="metric-row">
              <div class="metric-label">⽢油三酯</div>
              <div class="metric-result">
                <div class="metric-result-value">
                  {{
                    lab_results.blood_biochemistry.triglycerides.value + lab_results.blood_biochemistry.triglycerides.unit
                  }}
                </div>
                <span
                  :class="getMetricStatus(lab_results.blood_biochemistry.triglycerides.status)">{{
                    lab_results.blood_biochemistry.triglycerides.status
                  }}</span>
              </div>
            </div>
            <div class="metric-row">
              <div class="metric-label">C反应蛋白</div>
              <div class="metric-result">
                <div class="metric-result-value">
                  {{
                    lab_results.blood_biochemistry.crp.value + lab_results.blood_biochemistry.crp.unit
                  }}
                </div>
                <span :class="getMetricStatus(lab_results.blood_biochemistry.crp.status)">{{
                    lab_results.blood_biochemistry.crp.status
                  }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <div class="card">
            <h3 class="section-title">尿液分析</h3>
            <div class="metric-row">
              <div class="metric-label">尿pH值</div>
              <div class="metric-result">
                <div class="metric-result-value">{{ lab_results.urinalysis.ph.value }}</div>
                <span :class="getMetricStatus(lab_results.urinalysis.ph.status)">{{
                    lab_results.urinalysis.ph.status
                  }}</span>
              </div>
            </div>
            <div class="metric-row">
              <div class="metric-label">尿比重</div>
              <div class="metric-result">
                <div class="metric-result-value">{{ lab_results.urinalysis.specific_gravity.value }}</div>
                <span
                  :class="getMetricStatus(lab_results.urinalysis.specific_gravity.status)">{{
                    lab_results.urinalysis.specific_gravity.status
                  }}</span>
              </div>
            </div>
            <div class="metric-row">
              <div class="metric-label">尿蛋白</div>
              <div class="metric-result">
                <div class="metric-result-value">{{ lab_results.urinalysis.protein.value }}</div>
                <span :class="getMetricStatus(lab_results.urinalysis.protein.status)">{{
                    lab_results.urinalysis.protein.status
                  }}</span>
              </div>
            </div>
            <div class="metric-row">
              <div class="metric-label">尿白细胞</div>
              <div class="metric-result">
                <div class="metric-result-value">{{ lab_results.urinalysis.leukocytes.value }}</div>
                <span :class="getMetricStatus(lab_results.urinalysis.leukocytes.status)">{{
                    lab_results.urinalysis.leukocytes.status
                  }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, onBeforeUnmount, nextTick,computed} from 'vue'
import * as echarts from 'echarts'
import {getPatientById} from '@/demo-data/data/laboratoryReport.js';
import {useRouter, useRoute} from 'vue-router'

const router = useRouter()  // 用于编程式导航
const route = useRoute()    // 用于获取当前路由信息

const patient = ref()

//实验室检查结果图表
const laboratoryRef = ref(null)

let laboratoryInstance = null
// 初始化图表
const initLaboratoryChart = () => {
  if (!laboratoryRef.value) return;
  console.log(laboratoryRef.value, "走到这里吗")

  laboratoryInstance = echarts.init(laboratoryRef.value);

  const option = {
    title: {
      text: '',
      left: 'center',
      textStyle: {
        color: '#333',
        fontSize: 16,
        fontWeight: 'normal'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: '#7581BD',
          width: 1
        }
      },
      formatter: '{b}<br/>{a}: {c}'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: lab_results.value.blood_uric_acid_trend.data.map(item => item.time),
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      },
      axisLabel: {
        color: '#666'
      },
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#999'
        }
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#eee'
        }
      },
      axisLabel: {
        formatter: '{value}'
      }
    },
    series: [
      {
        name: '数据值',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#0770FF',
          borderColor: '#fff',
          borderWidth: 2
        },
        lineStyle: {
          width: 3,
          color: '#0770FF'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(7, 112, 255, 0.3)'
            },
            {
              offset: 1,
              color: 'rgba(7, 112, 255, 0.1)'
            }
          ])
        },
        data: lab_results.value.blood_uric_acid_trend.data.map(item => item.value),
        markPoint: {
          data: [
            {type: 'max', name: '最大值'},
            {type: 'min', name: '最小值'}
          ]
        },
        markLine: {
          data: [{type: 'average', name: '平均值'}]
        }
      }
    ]
  };

  laboratoryInstance.setOption(option);
};

const lab_results = ref("")

// 响应式调整图表大小
const resizeChart = () => {
  laboratoryInstance.resize()
}

onMounted(() => {
  window.addEventListener('resize', resizeChart)
  //根据路由传入的患者id查询某个患者的本页数据
  if (route.query.patientId) {
    patient.value = {...getPatientById(route.query.patientId)};
    nextTick(() => {
      initLaboratoryChart()
    })
    console.log(patient.value, "patient.value")

    //初始化lab_results值
    lab_results.value = patient.value.examinationList.find(item => item.examination_date == selectDate.value)

    console.log(lab_results.value,"lab_results.value ")
  }
})

function getMetricStatus(text) {
  if (text.includes("正常")) {
    return "metric-status metric-normal"
  } else if (text.includes("偏")) {
    return "metric-status metric-warning"
  } else {
    return "metric-status metric-danger"
  }
}

const selectDate = ref("2025-04-12") //当前日期筛选

function onSelectDateChange(){
  console.log(selectDate.value,"selectDate.value")
  //初始化lab_results值
  lab_results.value = patient.value.examinationList.find(item => item.examination_date == selectDate.value) || patient.value.examinationList.find(item => item.examination_date == "2025-04-12")
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

body {
  color: #333;
  line-height: 1.5;
  padding: 20px;
}

.container {
  max-width: 1200px;
  margin: 20px auto;
}

.title-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form-label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #333;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
  color: #333;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 20px -10px;
}

.col {
  flex: 1;
  padding: 0 10px;
  min-width: 0;
}

.card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.chart {
  height: 100%;
  margin: 15px 0;
  border-radius: 4px;
}

.chart-y-axis {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #999;
  font-size: 12px;
}

.chart-y-label {
  text-align: left;
}

.chart-x-axis {
  position: absolute;
  bottom: 0;
  left: 30px;
  right: 0;
  display: flex;
  justify-content: space-between;
  color: #999;
  font-size: 12px;
}

.chart-area {
  position: absolute;
  top: 0;
  left: 30px;
  right: 0;
  bottom: 20px;
  background: linear-gradient(to bottom, rgba(217, 236, 255, 0.5), rgba(217, 236, 255, 0));
  border-radius: 0 0 5px 0;
}

.chart-line {
  position: absolute;
  left: 30px;
  right: 0;
  bottom: 20px;
  height: calc(100% - 20px);
}

.chart-data-line {
  stroke: #409eff;
  stroke-width: 2;
  fill: none;
}

.chart-grid-line {
  stroke: #eee;
  stroke-width: 1;
}

.metric-card {
  text-align: center;
  padding: 15px;
}

.metric-value {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 5px;
}

.metric-name {
  color: #666;
  font-size: 14px;
  margin-bottom: 5px;
}

.metric-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  margin-top: 5px;
}

.metric-normal {
  background-color: #f0f9eb;
  color: #67c23a;
}

.metric-warning {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.metric-danger {
  background-color: #fef0f0;
  color: #f56c6c;
}

.big-number {
  text-align: center;
  padding: 30px 0;
}

.big-number-value {
  font-size: 40px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 10px;
}

.big-number-unit {
  font-size: 16px;
  color: #666;
}

.big-number-alert {
  margin-top: 10px;
}

.alert-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background-color: #f56c6c;
  color: white;
  border-radius: 50%;
  margin-right: 5px;
}

.reference-value {
  text-align: center;
  font-size: 13px;
  color: #999;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #eee;
}

.metric-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.metric-row:last-child {
  border-bottom: none;
}

.metric-label {
  color: #666;
}

.metric-result {
  display: flex;
  align-items: center;
}

.metric-result-value {
  font-weight: 500;
  margin-right: 10px;
}
</style>
